<template>
    <div class="component-library" @dragover.prevent @drop="dropInLibrary">
        <div class="Shouquanqixian1" @dragstart="drag($event, 'Shouquanqixian1')" draggable="true">
            <img src="../../public/images/20241105-141721.png" alt="" style="width: 100%;max-height: 100%;">
        </div>

    </div>
</template>
<script lang="ts" setup>
import { defineEmits } from 'vue'; // 1. 确保导入 defineEmits

const emit = defineEmits(['componentDropped']); // 2. 正确设置 emit
const drag = (event, componentType) => {
    event.dataTransfer.setData("text/plain", componentType);
    console.log("组件拖动");
};

// 处理组件拖回
const dropInLibrary = (event) => {
    const componentType = event.dataTransfer.getData("text/plain");
    console.log(`拖回的组件: ${componentType}`); // 在这里可以添加逻辑

    // 发射事件到父组件
    emit('componentDropped', componentType);
};
</script>
<style scoped>
.component-library {
  display: flex;
  gap: 10px;
  border: 1px solid #ddd;
  padding: 10px;
  min-height: 100px;
}
</style>